<template>
  <div class="health-container">
    <!-- 顶部标题和导航 -->
    <div class="header">
      <h1>{{ $t('notification.title') }}</h1>
    </div>
    
    <!-- 通知列表 -->
    <div class="content-area">
      <div class="notification-list" v-if="notifications.length > 0">
        <div class="notification-item" v-for="(notification, index) in notifications" :key="index">
          <div class="notification-content">
            <h3>{{ notification.title }}</h3>
            <p>{{ notification.content }}</p>
          </div>
          <div class="notification-meta">
            <span class="time">
              <i class="fas fa-calendar"></i>
              {{ formatDate(notification.time) }}
            </span>
            <span class="status">
              <i class="fas fa-eye"></i>
              {{ notification.read ? $t('notification.readStatus.read') : $t('notification.readStatus.unread') }}
            </span>
          </div>
          <div class="notification-actions">
            <button class="detail-btn" @click="showDetails(notification)">
              {{ $t('notification.actions.details') }}
            </button>
            <button class="delete-btn" @click="deleteNotification(index)">
              {{ $t('notification.actions.delete') }}
            </button>
          </div>
        </div>
      </div>

      <!-- 暂无通知提示 -->
      <div class="no-notifications" v-else>
        {{ $t('notification.noNotifications') }}
      </div>

      <!-- 详情模态框 -->
      <div v-if="currentDetail" class="modal-mask">
        <div class="modal-container">
          <div class="modal-header">
            <h3>通知详情</h3>
            <button class="modal-close" @click="currentDetail = null">&times;</button>
          </div>
          <form class="modal-form">
            <div class="form-group">
              <label>通知标题</label>
              <input type="text" :value="currentDetail.title" disabled>
            </div>
            <div class="form-group">
              <label>通知内容</label>
              <textarea :value="currentDetail.content" disabled rows="4"></textarea>
            </div>
            <div class="form-group">
              <label>通知时间</label>
              <input type="text" :value="formatDate(currentDetail.time)" disabled>
            </div>
            <div class="form-actions">
              <button type="button" class="modal-close-btn" @click="currentDetail = null">
                关闭
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NotificationSystem',
  data() {
    return {
      notifications: [
        { 
          title: '密码修改通知', 
          content: '您修改了密码。',
          time: new Date(),
          read: false 
        },
        { 
          title: '健康档案修改修改通知', 
          content: '您修改了健康档案。',
          time: new Date(Date.now() - 86400000),
          read: true 
        },
        { 
          title: '点赞通知', 
          content: '新冶山点赞了您的帖子',
          time: new Date(Date.now() - 86400000),
          read: true 
        }
      ],
      currentDetail: null
    };
  },
  methods: {
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    showDetails(notification) {
      this.currentDetail = notification;
      notification.read = true;
    },
    deleteNotification(index) {
      if (confirm(this.$t('notification.confirmDelete'))) {
        this.notifications.splice(index, 1);
      }
    }
  }
}
</script>

<style scoped>
/* 新增模态框样式 */
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-container {
  background: white;
  border-radius: 8px;
  padding: 20px;
  width: 500px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.modal-close {
  border: none;
  background: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
}

.modal-form .form-group {
  margin-bottom: 15px;
}

.modal-form label {
  display: block;
  margin-bottom: 5px;
  color: #333;
  font-weight: 500;
}

.modal-form input,
.modal-form textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #f8f9fa;
}

.modal-form textarea {
  resize: vertical;
}

.form-actions {
  margin-top: 20px;
  text-align: right;
}

.modal-close-btn {
  background: #2196F3;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}

.modal-close-btn:hover {
  background: #1976D2;
}

.health-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(74, 175, 254, 0.1);
  max-width: 800px;
  margin: 2rem auto;
  border: 1px solid #e3f2fd;
  position: relative;
  overflow: hidden;
}
.health-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(to bottom, #4f8bf9, #2ac9e6);
}

.header {
  margin-top: 0;
  text-align: center;
  border-bottom: 1px solid #e3f2fd;
  width: 100%;
  background: linear-gradient(135deg, 
    white 0%, 
    white 30%,  
    #3e92cc 60%, 
    #3e92cc 100%
  );
  margin-bottom: 30px;
  padding: 40px;
  border-radius: 10px;
}
.header h1 {
  font-size: 28px;
  color: #2c3e50;
  margin-bottom: 10px;
  position: relative;
  display: inline-block;
}

.content-area {
  background-color: #fff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(26, 115, 232, 0.1);
  width: 100%;
  border: 1px solid #e3f2fd;
}

.notification-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.notification-item {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(26, 115, 232, 0.1);
  border: 1px solid #e3f2fd;
  transition: all 0.3s;
}
.notification-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(26, 115, 232, 0.15);
}

.notification-content h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  color: #2d3748;
  font-weight: 500;
}
.notification-content p {
  margin: 0;
  color: #4a5568;
  line-height: 1.5;
}

.notification-meta {
  display: flex;
  justify-content: space-between;
  margin: 15px 0;
  font-size: 14px;
  color: #718096;
}

.notification-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.detail-btn, .delete-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.detail-btn {
  background-color: #2196F3;
  color: white;
}
.delete-btn {
  background-color: #f44336;
  color: white;
}
.detail-btn:hover, .delete-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  opacity: 0.9;
}

.no-notifications {
  text-align: center;
  padding: 40px;
  color: #718096;
  font-size: 16px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .health-container {
    padding: 1.5rem;
    margin: 1rem;
    border-radius: 8px;
  }
  .notification-actions {
    flex-direction: column;
    gap: 10px;
  }
  .detail-btn, .delete-btn {
    width: 100%;
  }
}
</style>